js利用form+iframe解决跨域post和get提交 |
您所在的位置:网站首页 › iframe post请求 › js利用form+iframe解决跨域post和get提交 |
JS跨域提交 ajax可以让我们对页面进行无刷新的操作,给我们前端和后台数据交互带来更多的体验,这里就不多说了,但ajax也有局限性,由于浏览器有安全机制,不 允许我们访问不同域的数据,也就是我们常说的"同源策略",大家可以去了解一下。但我们有时候又有这样的需求,下面我们浅谈一下,解决这种问题的办法。 1、jsonp格式 优点:跨域提交 缺点: 只能进行get方式访问 2、js+form+iframe+php 优点:跨域提交get和post的方式访问都是可以的 缺点:没有返回值 jsonp的这种格式非常简单,而且我前面一篇博客也简绍了这种方式,之所以介绍第二种,也是因为项目上用到了,而且我也觉得有必要单独的在把第二种方式拿出来分享一下。 html代码块: DOCTYPE html> 用户名: 密码: 提交
Javascript代码块: function smal_send(){ var user=$("#name").val(); var pwd=$("#pwd").val(); //http://localhost/juhe/Managers/DB/kuayu.php 你需要提交数据所到的后台地址 //method="post"则为post方式提交;method="get"则为get方式提交 var form =$("" + " " + " " + " "); $( "#SMAL" ).remove();//如果已存在iframe则将其移除 $( "body").append("");//载入iframe (function(){ $( "#SMAL" ).contents().find('body').html(form);//将form表单塞入iframe; $( "#SMAL" ).contents().find("form input[name='user_name']").val(user);//赋值给iframe中表单的文本框中 $( "#SMAL" ).contents().find("form input[name='password']").val(pwd);//赋值给iframe中表单的文本框中 $( "#SMAL" ).contents().find('form').submit();//提交数据 }()); } $(document).ready(function(){ $("#subData").click(function(){ smal_send();//调用函数 }) })
Php代码块:
由于使用iframe这种方式没有结果返回值,所以想要验证提交是否成功,最好建一张表,然后使用后台将提交得到的值放入数据库中以此来验证是否成功!
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |